<template>
  <div class="building">
      <!-- 楼栋管理 -->
    <div class="hd">
      <h2 class="title">
        楼栋管理
      </h2> 
      <el-input class="ipt" v-model="buidingName" @keyup.enter.native="search"></el-input>
      <el-button size="mini" type="primary" @click="search">查询</el-button>
      <el-button size="mini" type="success" @click="addShow(true,'新建小区')">添加小区</el-button>
    </div>
    <div class="bd">
      <Tree
      :list="buidingList"
      :searchText="seachText"
      :btnAdd="$utils.getPower('楼栋','添加')"
      :btnUpdate="$utils.getPower('楼栋','修改')"
      :btnDelete="$utils.getPower('楼栋','删除')"
      @addRow = "addShow"
      @delRow = "deleteBuilding"
      />
    </div>
    <Bialog
    :show="showDialog"
    @close="addShow"
    />
  </div>
</template>

<script>
import {buildingList} from '../utils/utils'
// import {buildingDelete} from '../utils/utils'
import axios from 'axios'
import Tree from '../components/common/Tree.vue'//内容
import Bialog from '../components/building/dialog.vue'//添加弹框
    export default {
      components:{
        Tree,
        Bialog,
      },
      data(){
        return{
          buidingName:'',
          seachText:'',
          buidingList: [],
          showDialog:false,
          addForm:{
            id:0,
            name:'',
            pid:0
          }
        }
      },
      created(){
        this.gitBuildingList()
      },
      methods:{
        async gitBuildingList(){
          const {data} = await buildingList()
          this.buidingList = data.list
          console.log(this.buidingList)
        },
        search(){
          this.seachText = this.buidingName
          // console.log(this.seachText)
        },
        addShow(show,title,data,flag){
          this.showDialog = show
          this.$store.commit('building/SET_TITLE',title)
          // console.log(show,title,data,flag)
          if(show){
            if(!data){
              this.$store.commit('building/SET_ADDFORM',this.addForm)
            }else{
              if(flag === 0){
                this.$store.commit('building/SET_ADDFORM',{
                        id:0,
                        name: '',
                        pid: data.id
                    })
              }else{
                this.$store.commit('building/SET_ADDFORM',{
                        id: data.id,
                        name: data.name,
                        pid: data.pid
                    })
              }
            }
          }else{
            // 更新列表 有修改的数据才刷新列表
            flag && this.getBuildingList()
            // 重置数据
            this.$store.commit('building/SET_ADDFORM', this.addForm)
          }
        },
        // 删除
        deleteBuilding(val){
          const {id} = val
          axios.get('/api/building/delete?id='+id).then((res)=>{
            const {errCode,errMsg} = res.data
              if(errCode == 10000){
                this.$message({
                  type:'success',
                  message:'删除成功'
                })
                this.gitBuildingList()
              }else{
                this.$message({
                  type:'error',
                  message:'删除失败'
                })
              }
          })
        },
      }
    }
</script>
<style >
.el-tree-node__content{
    height: 35px;
  }
  .el-tree-node{
  width: 800px;
}
</style>
<style lang="less" scoped>
.hd{
    display: flex;
    align-items: center;
    padding: 10px 0 20px 0;
    border-bottom: 1px solid #eee;
    .title{
        font-size: 16px;
        color: #427ff4;
    }
    .ipt{
      width: 200px;
      margin: 0 10px;
    }
}

</style>